<template>
  <div>
    <el-row class="prompt">
      <div v-html="$t('configLazyLoad.customerConfig.tip4')"></div>
    </el-row>
    <el-row v-for="(item, index) in listData" :key="index" class="stable">
      <el-col :span="4" style="text-align: left;padding-top: 5px">
        <span>{{$t('config.customer.customerFiled.' + item.name)}}:</span>
      </el-col>
      <el-col :span="8" style="padding-left: 10px">
        <el-input v-model.trim="item.value"
                  @blur="changeIshow(item)"
                  :disabled="item.name === 'city' || item.name === 'province' || item.name === 'district'"
                  :placeholder="$t('config.customer.writeCustomName')"></el-input>
      </el-col>
      <el-col :span="12" class="checkbox-col">
        <!-- <el-checkbox-group v-model="checkList">-->
        <!--必填-->
        <el-checkbox label="" v-model="item.required" :disabled="item.name === 'name'">{{$t('validate.required')}}</el-checkbox>
        <!--可查询-->
        <el-checkbox label="" v-model="item.search"
                     :disabled="item.name === 'city' || item.name === 'province' || item.name === 'district' || item.name === 'name' || item.name === 'phone'">{{$t('config.customer.canInquire')}}</el-checkbox>
        <!--禁止修改-->
        <el-checkbox label="" v-model="item.noupdate"
                     v-if="!(item.name === 'email' || item.name === 'weixin' || item.name == 'city' || item.name == 'district')">{{$t('config.customer.noupdate')}}<span v-if="item.name === 'phone'">{{$t('configLazyLoad.customerConfig.haveNote')}}</span></el-checkbox>
        <!--来电展示-->
        <el-checkbox label="" v-model="item.isShowCall"
                     v-if="item.name === 'phone'"><span v-if="item.name === 'phone'">{{$t('configLazyLoad.customerConfig.showCall')}}</span></el-checkbox>             
        <!--必填-->
        <el-checkbox label="" v-model="item.isShow" v-if="!(item.name == 'name' || item.name == 'phone' || item.name == 'city' || item.name == 'district')">{{$t('configLazyLoad.customerConfig.ifHide')}}</el-checkbox>
        <!-- </el-checkbox-group>-->
      </el-col>
    </el-row>
    <div class="dialog-footer text-aligin">
      <el-button @click.stop="cannelCustomField" class='primary_btn'>{{$t('public.cancel')}}</el-button>
      <el-button type="primary" @click="saveCustomField" class='primary_btn'>{{$t('public.confirm')}}</el-button>
    </div>
  </div>
</template>
<script>
  import { deepClone } from '@/utils/m7Utils.js'
  export default {
    name: 'CustomerFieldDialog',
    data () {
      return {
        listData: [],
        customerFields: {
          stable_fields: [],
          _id: ''
        }
      }
    },
    props: {
      customerField: Object,
      list: Array
    },
    methods: {
      changeIshow (item) {
        if (!(item.name === 'name' || item.name === 'phone' || item.name === 'city' || item.name === 'district')) {
          if (!item.value) {
            this.$set(item, 'isShow', true)
          }
        }
      },
      saveCustomField () {
        let data = []
        let nameEmp = false
        let phoneEmp = false
        let provC = false
        let provCD = false
        let that = this
        let _array = deepClone(that.listData)
        let _obj = {}
        _array.map(function (e, item) {
          _obj[e.name] = {
            required: e.required,
            value: e.value
          }
        })
        _array.forEach((item, index) => {
          if (item.name === 'city' && item.required && _obj.province && !_obj.province.required) {
            provC = true
          } else if (item.name === 'district' && item.required && ((_obj.city && !_obj.city.required) || (_obj.province && !_obj.province.required))) {
            provCD = true
          }
          if (item.name === 'name' && (item.value === '')) {
            nameEmp = true
          }
          if (item.name === 'phone' && (item.value === '')) {
            phoneEmp = true
          }
          if (item.required) {
            _array[index].required = 'required'
          } else {
            _array[index].required = ''
          }
          if (item.value) {
            data.push(item)
          }
        })
        if (provC) {
          this.$message.error(this.$t('configLazyLoad.customerConfig.errorTip1'))
          return
        } else if (provCD) {
          this.$message.error(this.$t('configLazyLoad.customerConfig.errorTip2'))
          return
        }
        if (phoneEmp) {
          this.$message.error(this.$t('configLazyLoad.customerConfig.errorTip3'))
          return
        }
        if (nameEmp) {
          this.$message.error(this.$t('configLazyLoad.customerConfig.errorTip4'))
          return
        }
        this.$store.dispatch('editFields', {fields: data, id: this.customerFields._id}).then(resp => {
          if (resp.success) {
            this.$message.success(this.$t('userInfo.editSuccess'))
            this.$emit('customField', {fields: data, flag: false})
          } else {
            this.$message.error(this.$t('userInfo.editFail'))
          }
        })
      },
      cannelCustomField () {
        this.$emit('customField', {fields: this.customerField.stable_fields, flag: false})
      }
    },
    beforeMount () {
      let that = this
      that.customerFields = deepClone(that.customerField)
      let _listData = deepClone(that.list)
      that.customerFields.stable_fields.forEach((item, index) => {
        if (item.required === 'required') {
          that.customerFields.stable_fields[index].required = true
        } else {
          that.customerFields.stable_fields[index].required = false
        }
      })
      _listData.forEach((item, index) => {
        that.customerFields.stable_fields.forEach((data, i) => {
          if (item.name === data.name) {
            _listData[index] = data
          } else {
          }
        })
      })
      this.listData = []
      for (let i = 0; i < _listData.length; i++) {
        if (!_listData[i].value) {
          _listData[i].isShow = true
        }
        this.listData.push(_listData[i])
      }
      console.log(this.listData)
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .text-aligin
    text-align center
  .stable
     margin-bottom 10px
    .prompt
      color: $c-prompt
      margin-bottom 20px
  .checkbox-col
    padding-left: 10px
    padding-top: 7px
</style>
